<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>会议室</title>
        <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
        <link href="../../../static/css/select.css" rel="stylesheet" type="text/css"/>

        <script type="text/javascript" src="../../../static/js/jquery.js"></script>

        <script type="text/javascript" src="../../../static/js/jquery.idTabs.min.js"></script>
        <script type="text/javascript" src="../../../static/js/select-ui.min.js"></script>
        <script type="text/javascript" src="../../../static/editor/kindeditor.js"></script>
        <script type="text/javascript" src="../../../static/js/vue.js"></script>
        <script type="text/javascript" src="../../../static/js/axios.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function (e) {
                $(".select1").uedSelect({
                    width: 200
                });

            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".click").click(function () {
                    $(".tip").fadeIn(200);
                });

                $(".tip .tiptop a").click(function () {
                    $(".tip").fadeOut(200);
                });
                $(".tip2 .tiptop a").click(function () {
                    $(".tip2").fadeOut(200);
                });

                $(".sure").click(function () {
                    $(".tip").fadeOut(100);
                });

                $(".tip .cancel").click(function () {
                    $(".tip").fadeOut(100);
                });
                $(".tip2 .cancel").click(function () {
                    $(".tip2").fadeOut(100);
                });

            });
        </script>

    </head>

    <body>

        <div class="place">
            <span>位置：</span>
            <ul class="placeul">
                <li><a href="#">会议管理</a></li>
                <li><a href="#">会议管理</a></li>
            </ul>
        </div>

        <div class="rightinfo" id="meetroom">

            <ul class="prosearch">
                <li>
                    <label>查询：</label><i>会议室名</i>
                    <a>
                        <input name="meetRoomName" id="meetRoomName" type="text" class="scinput"/>
                    </a>
                    <i>会议室状态</i>
                    <a>
                        <select class="select1" name="status" id="status">
                            <option value="">请选择</option>
                            <option value="0">未使用</option>
<!--                            <option value="1">预约中</option>-->
<!--                            <option value="2">已预约</option>-->
                            <option value="3">使用中</option>
                        </select>
                    </a>
                    <i>有无空调</i>
                    <a>
                        <select class="select1" name="isHaveHvac" id="isHaveHvac">
                            <option value="">请选择</option>
                            <option value="0">无</option>
                            <option value="1">有</option>
                        </select>
                    </a>

                </li>
                <a>
                    <input name="" type="button" class="sure" @click="lunbo(pageModel.pageNum)" value="查询"/>
<!--                    <input name="" type="button" class="sure" @click="toAdd()" value="新增"/>-->
                                        <input name="" type="button" class="sure" v-if="customOneName.roleId==3"  @click="toAdd()" value="新增"/>
<!--                    <input name="" type="button" class="sure" @click="toDeleteMeeting()" value="取消预约"/>-->
                                        <input name="" type="button" class="sure" v-if="customOneName.roleId==2"  @click="toDeleteMeeting()" value="取消预约"/>
                    <input name="" type="button" class="btn" @click="toChoose()" v-if="customOneName.roleId==3" value="导出会议室使用报表"/>
                </a>
            </ul>

            <div class="formtitle1"><span>会议室列表</span></div>

            <div v-if="messages == ''"> <h3>没有会议室</h3></div>

            <table class="tablelist" v-if="messages != ''">
                <thead>
                    <tr>
                       <!-- <th>
                            <input name="" type="checkbox" value="" checked="checked"/>
                        </th>-->
                        <th>会议室名称</th>
                        <th>会议室地址</th>
                        <th>有无空调</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="meetroom in messages">
                        <!--<td>
                            <input name="" type="checkbox" value=""/>
                        </td>-->
                        <td>{{meetroom.meetRoomName}}</td>
                        <td>{{meetroom.meetRoomPlace}}</td>
                        <td v-if="meetroom.isHaveHvac == 0">无</td>
                        <td v-if="meetroom.isHaveHvac == 1">有</td>
                        <td v-if="meetroom.status == 0">未使用</td>
                        <td v-if="meetroom.status == 1">预约中</td>
                        <td v-if="meetroom.status == 2">已预约</td>
                        <td v-if="meetroom.status == 3">使用中</td>
                        <td>
                            <a href="javascript:;" class="tablelink" @click="toshow(meetroom.mid)">查看</a>
<!--                            <a href="javascript:;" class="tablelink" @click="toupdate(meetroom.mid)">修改</a>-->
                                                        <a href="javascript:;" class="tablelink" v-if="customOneName.roleId==3" @click="toupdate(meetroom.mid)">修改</a>
<!--                            <a href="javascript:;" class="tablelink" @click="todelete(meetroom.mid)"> 删除</a>-->
                                                        <a href="javascript:;" class="tablelink" v-if="customOneName.roleId==3" @click="todelete(meetroom.mid)"> 删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="pagin" v-if="messages != ''">
                <div class="message">共<i class="blue">{{pageModel.totalRows}}</i>条记录，当前显示第&nbsp;<i
                        class="blue">{{pageModel.pageNum}}&nbsp;</i>页
                </div>
                <!--总页数大于7页的时候-->
                <ul class="paginList" v-if="pageModel.totalPage>7">
                    <li class="paginItem"><a href="javascript:;"
                                             @click="lunbo(pageModel.pageNum==1?1:pageModel.pageNum-1)"><span
                            v-bind:class="pageModel.pageNum==1?'pagepre':'pagepre0'"></span></a></li>
                    <!--第一个格子-->
                    <li v-bind:class="pageModel.pageNum==1?'paginItem current':'paginItem'">
                        <a href="javascript:;" @click="lunbo(1)">1</a>
                    </li>

                    <!--第二个格子-->
                    <li class="paginItem" v-if="(pageModel.pageNum> pageModel.totalPage-5) && (pageModel.pageNum>5) "><a
                            href="javascript:;">...</a></li>
                    <li v-bind:class="pageModel.pageNum==2?'paginItem current':'paginItem'"
                        v-if="(pageModel.pageNum<=5) || (pageModel.pageNum<=pageModel.totalPage-5 && pageModel.pageNum>5)">
                        <a href="javascript:;" @click="lunbo(2)">2</a>
                    </li>

                    <!--第三个格子-->
                    <li class="paginItem" v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a
                            href="javascript:;">...</a></li>
                    <li v-bind:class="pageModel.pageNum==3?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                        <a href="javascript:;" @click="lunbo(3)">3</a></li>
                    <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-4)?'paginItem current':'paginItem'"
                        v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                                     @click="lunbo(pageModel.totalPage-4)">{{pageModel.totalPage - 4}}</a>
                    </li>

                    <!--第四个格子-->
                    <li v-bind:class="pageModel.pageNum==4?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                        <a href="javascript:;" @click="lunbo(4)">4</a></li>
                    <li class="paginItem current"
                        v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a href="javascript:;">{{pageModel.pageNum}}</a>
                    </li>
                    <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-3)?'paginItem current':'paginItem'"
                        v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                                     @click="lunbo(pageModel.totalPage-3)">{{pageModel.totalPage - 3}}</a>
                    </li>

                    <!--第五个格子-->
                    <li v-bind:class="pageModel.pageNum==5?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                        <a href="javascript:;" @click="lunbo(5)">5</a></li>
                    <li class="paginItem" v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a
                            href="javascript:;">...</a></li>
                    <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-2)?'paginItem current':'paginItem'"
                        v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                                     @click="lunbo(pageModel.totalPage-2)">{{pageModel.totalPage - 2}}</a>
                    </li>

                    <!--第六个格子-->
                    <li class="paginItem" v-if="pageModel.pageNum<=5"><a href="javascript:;">...</a></li>
                    <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-1)?'paginItem current':'paginItem'"
                        v-if="pageModel.pageNum>5"><a href="javascript:;"
                                                      @click="lunbo(pageModel.totalPage-1)">{{pageModel.totalPage - 1}}</a>
                    </li>

                    <!--第七个格子-->
                    <li v-bind:class="pageModel.pageNum==pageModel.totalPage?'paginItem current':'paginItem'"><a
                            href="javascript:;" @click="lunbo(pageModel.totalPage)">{{pageModel.totalPage}}</a></li>

                    <!--        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>-->
                    <li class="paginItem"><a href="javascript:;"
                                             @click="lunbo(pageModel.pageNum==pageModel.totalPage?pageModel.totalPage:pageModel.pageNum+1)"><span
                            v-bind:class="pageModel.pageNum==pageModel.totalPage?'pagenxt0':'pagenxt'"></span></a></li>
                </ul>
                <!--总页数小于8页的时候-->
                <ul class="paginList" v-if="pageModel.totalPage<=7">
                    <li class="paginItem"><a href="javascript:;"
                                             @click="lunbo(pageModel.pageNum==1?1:pageModel.pageNum-1)"><span
                            v-bind:class="pageModel.pageNum==1?'pagepre':'pagepre0'"></span></a></li>

                    <li v-for="index of pageModel.totalPage" :key="index"
                        v-bind:class="index == pageModel.pageNum?'paginItem current':'paginItem'">
                        <a href="javascript:;" @click="lunbo(index)">{{index}}</a>
                    </li>

                    <li class="paginItem"><a href="javascript:;"
                                             @click="lunbo(pageModel.pageNum==pageModel.totalPage?pageModel.totalPage:pageModel.pageNum+1)"><span
                            v-bind:class="pageModel.pageNum==pageModel.totalPage?'pagenxt0':'pagenxt'"></span></a></li>
                </ul>
            </div>

            <div class="tip">
                <div class="tiptop"><span>提示信息</span>
                    <a></a>
                </div>

                <div class="tipinfo">
                    <span><img src="../../../static/images/ticon.png"/></span>
                    <div class="tipright">
                        <p>是否确认对信息的删除 ？</p>
                        <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
                    </div>
                </div>

                <div class="tipbtn">
                    <input name="" type="button" class="sure" value="确定"/>&nbsp;
                    <input name="" type="button" class="cancel" value="取消"/>
                </div>

            </div>
            <div class="tip2">
                <div class="tiptop"><span>提示信息</span>
                    <a></a>
                </div>

                <div class="tipinfo">
                    <span><img src="../../../static/images/ticon.png"/></span>
                    <div class="tipright">
                        <p>选择导出信息的月份: </p><input style="outline: 2px solid grey" type="month" id="chooseMonth"
                                                         @change="testTime()"/><br/><br/>
                        <p>是否确认对信息进行导出 ？</p>
                        <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
                    </div>
                </div>

                <div class="tipbtn">
                    <input name="" type="button" class="sure" @click="toExcel()" value="确定"/>&nbsp;
                    <input name="" type="button" class="cancel" value="取消"/>
                </div>

            </div>

        </div>

        <script type="text/javascript">
            $('.tablelist tbody tr:odd').addClass('odd');

            var meetRoomName = $("#meetRoomName").val();
            var status = $("#status").val();
            var isHaveHvac = $("#isHaveHvac").val();

            /*设置导出时间*/
            //开始月
            var startMonth = null;
            //下一月
            var nextMonth = null;
            //用户信息
            //var customOneName = JSON.parse(sessionStorage.getItem("customer"));

            var vm = new Vue({
                el: "#meetroom",
                data:
                    {
                        customOneName: '',
                        messages: '',
                        pageModel: '',
                    },
                methods: {
                    send() {
                        axios({
                            method: 'post',
                            url: '/meetroom/list',
                            params: {
                                "meetRoomName": meetRoomName,
                                "status": status,
                                "isHaveHvac": isHaveHvac,
                                "pageNum": this.pageModel.pageNum,
                                "pageSize": this.pageModel.pageSize,
                            },
                        }).then(function (res) {
                            vm.messages = res.data.data;
                            vm.pageModel = res.data;
                            vm.customOneName = JSON.parse(sessionStorage.getItem("customer"));
                            console.log(vm.customOneName);
                        }).catch(function (reason) {
                            console.log(reason);
                        })
                    },
                    toshow: function (ele) {
                        window.location.href = "showMeetroom.html?mid=" + ele;
                    },
                    toupdate: function (ele) {
                        window.location.href = "updateMeetroom.html?mid=" + ele;
                    },
                    todelete: function (ele) {
                        $(".tip").fadeIn(200);
                        $(".tip .sure").click(function () {
                            axios({
                                method: 'post',
                                url: '/meetroom/delete/' + ele,
                            }).then(function (res) {
                                alert("删除成功!!!");
                                $(".tip").fadeOut(100);
                                vm.send();
                            }).catch(function (reason) {
                                alert("删除失败!!!");
                            })
                        })
                    },
                    toChoose() {
                        $(".tip2").fadeIn(200);
                    },
                    toExcel() {
                        var chooseMonth = $('#chooseMonth').val();
                        if (chooseMonth != null && chooseMonth != '') {
                            this.setMonthDate(chooseMonth);
                            axios({
                                method: 'post',
                                url: '/meetroom/estimate?startMonth=' + startMonth + '&nextMonth=' + nextMonth,
                            }).then(function (res) {
                                if (res.data == true) {
                                    window.location.href = "/meetroom/download?startMonth=" + startMonth + "&nextMonth=" + nextMonth;
                                } else {
                                    alert("当月没有使用会议室！！！");
                                }

                            }).catch(function (reason) {
                                alert("下载失败!!!");
                            })
                        } else {
                            alert("选择月份不能为空，请选择时间！！！");
                        }

                    },
                    lunbo: function (ele) {
                        vm.pageModel.pageNum = ele;
                        meetRoomName = $("#meetRoomName").val();
                        status = $("#status").val();
                        isHaveHvac = $("#isHaveHvac").val();
                        this.send();
                    },
                    toAdd: function () {
                        window.location.href = "addMeetroom.html";
                    },
                    toDeleteMeeting: function () {
                        var customOneName = JSON.parse(sessionStorage.getItem("customer"));
                        var userid = customOneName.id; //登录者id
                        window.location.href = "MeetingList.html?userId=" + userid;
                    },
                    testTime() {
                        var now = new Date();
                        var chooseMonth = $('#chooseMonth').val();
                        var start = new Date(chooseMonth);
                        if (start > now) {
                            $('#meetstarttime').val("");
                            alert("开始时间时间小于当前时间，请重新选择开始时间！！！");
                        }
                    },
                    setMonthDate(date) {
                        var nowTime = new Date(date);
                        var year1 = nowTime.getFullYear();
                        var year2 = year1;
                        var month1 = nowTime.getMonth() + 1;
                        var month2 = month1 + 1;
                        var day = 1;
                        var hour = 0;
                        var minutes = 0;
                        var second = 0;

                        if (month2 > 0 && month2 < 10) {
                            month2 = "0" + month2;
                        } else if (month2 > 12) {
                            month2 = "01";
                            year2 = year1 + 1;
                        }
                        if (month1 > 0 && month1 < 10) {
                            month1 = "0" + month1;
                        }
                        if (day > 0 && day < 10) {
                            day = "0" + day;
                        }
                        if (hour > 0 && hour < 10) {
                            hour = (hour - 8 + 24) % 24
                            hour = "0" + hour;
                        }
                        if (minutes > 0 && minutes < 10) {
                            minutes = "0" + minutes;
                        }
                        if (second > 0 && second < 10) {
                            second = "0" + second;
                        }
                        startMonth = year1 + "-" + month1 + "-" + day + " " + hour + ":" + minutes + ":" + second;
                        nextMonth = year2 + "-" + month2 + "-" + day + " " + hour + ":" + minutes + ":" + second;
                    }
                },
                //页面加载完自动执行
                mounted() {
                    this.send();
                }
            });
        </script>

    </body>

</html>